<template>
  <div class="body">
    <filmscinemas-header>
      <span>{{ filmName }}</span>
    </filmscinemas-header>

    <filmscinemas-swiper class="date">
      <detail-swiper-item class="avatar" v-for="(item,index) in showDateList" :key="index">
        <div class="name" @click="handleColor(index,item)" :class="backcolorIndex===index?'active':''">
          <span>{{ item | dateFilter }}</span>
        </div>
      </detail-swiper-item>
    </filmscinemas-swiper>

    <!--  todo-> 优化：与影院搜索布局相同，后期可封装成组件  -->
    <div v-for="(data,index) in cinemasListData" v-show="index === backcolorIndex">
      <ul>
        <li v-for="item in data" :key="item.cinemaId" @click="handleJumpTicket(filmId,item.cinemaId,date)">
          <div class="left">
            <div class="name">{{ item.name }}</div>
            <div class="address">{{ item.address }}</div>
          </div>
          <div class="right">
            <div>￥<span>{{ (item.lowPrice / 100).toFixed(1) }}</span>起</div>
            <div class="distance">{{ (item.Distance * 500).toFixed(2) }}km</div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import filmscinemasHeader from '@/components/filmscinemas/FilmsCinemasHeader';
import filmscinemasSwiper from '@/components/filmscinemas/FilmsCinemasSwiper';
import detailSwiperItem from '@/components/detail/DetailSwiperItem';
import http from "@/util/http";
import myMixin from "@/util/myMixin";
import {mapState, mapActions, mapMutations} from "vuex";
import Vue from "vue";

function formatDay(date) {
  let Dates = date * 1000;

  let time = new Date(Dates);
  let m = time.getMonth() + 1;
  let d = time.getDate();

  const timeNow = new Date();
  const TimeNow = timeNow.getTime();
  //两个时间相差的秒数
  const sub = Math.ceil((Dates - TimeNow) / 1000)
  //相差的时间换成日
  const days = Math.floor(sub / (24 * 60 * 60))
  let day;
  let week;
  if (days <= 1) {
    // 获取今明后
    // 获取今天时间戳，判断：今天:相隔天数<1; 明天:相隔天数<2,>1; 后天:相隔天数<3,>2;
    if (days === -1) day = "今天";
    if (days === 0) day = "明天";
    if (days === 1) day = "后天";
    return day + ' ' + m + '月' + d + '日';
  } else {
    // 获取星期几
    if (time.getDay() === 0) week = "周日";
    if (time.getDay() === 1) week = "周一";
    if (time.getDay() === 2) week = "周二";
    if (time.getDay() === 3) week = "周三";
    if (time.getDay() === 4) week = "周四";
    if (time.getDay() === 5) week = "周五";
    if (time.getDay() === 6) week = "周六";
    return week + ' ' + m + '月' + d + '日';
  }
}

Vue.filter("dateFilter", (date) => {
  return formatDay(date)
})

export default {
  mixins: [myMixin],

  computed: {
    ...mapState(['cityId', 'cinemaList', 'filmName', 'filmId', 'date']),
  },

  data() {
    return {
      cinemasData: [],
      cinemasListData: [],
      showDateList: [],
      backcolorIndex: 0,
    }
  },
  components: {
    filmscinemasHeader,
    filmscinemasSwiper,
    detailSwiperItem,
  },
  methods: {
    ...mapActions(['getCinemaData']),
    ...mapMutations(['changeDate','changeIndex']),

    handleColor(index, date) {
      this.backcolorIndex = index
      // 改变date
      this.changeDate(date)
    },
    handleJumpTicket(filmId, cinemaId, date) {
      this.$router.push(`/cinemasticket/${filmId}/${cinemaId}/${date}`)
    }
  },

  created() {
    http.httpForFilmsCinema(this.$route.params.filmId, this.cityId).then(res => {
      // console.log(res.data.data.showCinemas[0].showDate)
      this.cinemasData = res.data.data.showCinemas

      // 按大到小顺序排列时间戳
      let a = [];
      this.cinemasData.forEach(item => {
        a.push(item.showDate)
      })
      this.showDateList = a.sort(function (a, b) {
        return a - b
      })

      // 改变state上的date为排列好的时间戳的第一个 ==> 今天
      this.changeDate(this.showDateList[0])

      // 通过逐个对比cinemaId，挑选出返回的影院数据
      for (let j = 0, jLength = this.cinemasData.length; j < jLength; j++) {
        let k = 0;
        let list = [];
        for (let i = 0, iLength = this.cinemaList.length; i < iLength; i++) {
          this.cinemasData[j].cinemaList.forEach(item => {
            if (this.cinemaList[i].cinemaId === item) {
              list[k] = this.cinemaList[i];
              ++k;
            }
          })
        }
        console.log(list)
        this.cinemasListData.push(list)
      }
      console.log("本页总数据",this.cinemasListData)
    });

    // dispatch：分发
    // stare里面有cinema数据就不需要发起请求
    if (this.cinemaList.length === 0) {
      this.getCinemaData(this.cityId)
    }

  },
}
</script>

<style lang="scss" scoped>
.body {
  overflow: hidden;
  box-sizing: border-box;
}

.swiper-wrapper {
  border-bottom: 1px solid #ececec;
}

.date {
  margin-top: 45px;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 1px solid #ececec;

  .avatar {
    width: 125px;
    height: 45px;
    color: #666666;
    display: flex;
    justify-content: center;
    align-items: center;

    .name {
      width: 85%;
      height: 43px;
      text-align: center;

      span {
        line-height: 45px;
        font-size: 15px;
      }
    }
  }
}

.active {
  color: #f03d37;
  border-bottom: 2px solid #f03d37;
  border-radius: 1px;
}


li {
  height: 45px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  position: relative;


  .left {
    width: 2.12rem;
    padding-right: 15px;

    .name {
      font-weight: 15px;
      color: #191a1b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .address {
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .right {
    font-size: 12px;
    color: #ff5f16;

    span {
      font-size: 15px;
    }

    .distance {
      color: #797d82;
      margin-top: 5px;
    }
  }
}

li:before {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  height: 1px;
  content: '';
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  border-top: 1px solid #ececec;
}

.box {
  height: 577px;
  overflow: hidden;
  background-color: #fff;
  position: relative; /* 为滚动条加定位 */
}
</style>
